import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

//1、基础布局组件处理

//   Container  容器布局组件 应用示范
//void main(){
//  runApp(
//    MaterialApp(
//      title: "",
//      home: new ContainerLayoutDemo(),
//    )
//  );
//}

// Container  容器布局组件
class ContainerLayoutDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    //返回一个container对象
    Widget container = new Container(
      //添加装饰效果
      decoration: new BoxDecoration(
        color: Colors.grey
      ),
      // 子元素指定为一个垂直水平嵌套布局的组件
      child: new Column(
        children: <Widget>[
          new Row(
            children: <Widget>[
              //使用Expanded 防止内容溢出
              new Expanded(
                  child: new Container(
                    width: 150.0,
                    height: 150.0,
                    //添加边框样式
                    decoration: new BoxDecoration(
                      //上下左右边框设置为宽度10.0，颜色为蓝灰色
                      border: new Border.all(width: 10.0,color: Colors.blueGrey),
                      //上下左右边框弧度设置为 8.0
                      borderRadius: const BorderRadius.all(const Radius.circular(8.0)),
                    ),
                    // 上下左右增加边距
                    margin: const EdgeInsets.all(4.0),
                    //添加图片
                    child: new Image.asset("images/image1.jpg"),
                  )
              ),
              new Expanded(
                  child: new Container(
                    width: 150.0,
                    height: 150.0,
                    //添加边框样式
                    decoration: new BoxDecoration(
                      //上下左右边框设置为宽度10.0，颜色为蓝灰色
                      border: new Border.all(width: 10.0,color: Colors.blueGrey),
                      //上下左右边框弧度设置为 8.0
                      borderRadius: const BorderRadius.all(const Radius.circular(8.0)),
                    ),
                    // 上下左右增加边距
                    margin: const EdgeInsets.all(4.0),
                    //添加图片
                    child: new Image.asset("images/timg.jpg"),
                  )
              ),
            ],
          ),
          new Row(
            children: <Widget>[
              //使用Expanded 防止内容溢出
              new Expanded(
                  child: new Container(
                    width: 150.0,
                    height: 150.0,
                    //添加边框样式
                    decoration: new BoxDecoration(
                      //上下左右边框设置为宽度10.0，颜色为蓝灰色
                      border: new Border.all(width: 10.0,color: Colors.blueGrey),
                      //上下左右边框弧度设置为 8.0
                      borderRadius: const BorderRadius.all(const Radius.circular(8.0)),
                    ),
                    // 上下左右增加边距
                    margin: const EdgeInsets.all(4.0),
                    //添加图片
                    child: new Image.asset("images/image1.jpg"),
                  )
              ),
              new Expanded(
                  child: new Container(
                    width: 150.0,
                    height: 150.0,
                    //添加边框样式
                    decoration: new BoxDecoration(
                      //上下左右边框设置为宽度10.0，颜色为蓝灰色
                      border: new Border.all(width: 10.0,color: Colors.blueGrey),
                      //上下左右边框弧度设置为 8.0
                      borderRadius: const BorderRadius.all(const Radius.circular(8.0)),
                    ),
                    // 上下左右增加边距
                    margin: const EdgeInsets.all(4.0),
                    //添加图片
                    child: new Image.asset("images/timg.jpg"),
                  )
              ),
            ],
          )
        ],
      ),
    );
    return new Scaffold(
      appBar: AppBar(
        title: Text("Container 组件"),
        centerTitle: true,
      ),
      body: container,
    );
  }
}


//  CupertinoActivityIndicator  指示器组件 应用示范
//void main(){
//  runApp(new CenterLayoutDemo());
//}

// Center 居中布局组件
class CenterLayoutDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("Center 居中布局组件 "),
          centerTitle: true,
        ),
        body: Center(
          child: Text(
              "Hello Center",
               style: TextStyle(
                 fontSize: 30.0
               ),
          ),
        ),
      ),
    );
  }

}


//  Padding 填充布局组件 应用示范
//void main(){
//  runApp(new PaddingDemo());
//}

//Padding 填充布局组件
class PaddingDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("Padding 填充布局组件"),
          centerTitle: true,
        ),
        body: new Center(
          child: new Container(
            width: 300.0,
            height: 300.0,
            // 容器上下左右填充设置为 60
            padding: EdgeInsets.all(60.0),
            decoration: new BoxDecoration(
              color: Colors.white,
              border: new Border.all(
                color: Colors.green,
                width: 8.0,
              )
            ),
            child: new Container(
              width: 200.0,
              height: 200.0,
              decoration: new BoxDecoration(
                color: Colors.white,
                border: new Border.all(
                  color: Colors.blue,
                  width: 8.0,
                )
              ),
              child: new FlutterLogo(),
            ),
          ),
        ),
      ),
    );
  }

}

//void main(){
//  runApp(new AlignLayoutDemo());
//}

// Align 对齐布局
class AlignLayoutDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar:AppBar(
          title: Text("Align 对齐布局"),
          centerTitle: true,
        ),
        body: new Stack(
          children: <Widget>[
            //左上角
            new Align(
              alignment: new FractionalOffset(0.0, 0.0),
              child: Image.asset("images/image1.jpg",width: 128.0,height: 128.0,),
            ),
            //右上角
            new Align(
              alignment: new FractionalOffset(1.0, 0.0),
              child: Image.asset("images/timg.jpg",width: 128.0,height: 128.0,),
            ),
            //水平垂直方向居中
            new Align(
              alignment: FractionalOffset.center,
              child: Image.asset("images/timg.jpg",width: 128.0,height: 128.0,),
            ),
            //左下角
            new Align(
              alignment: new FractionalOffset(0.0, 1.0),
              child: Image.asset("images/image1.jpg",width: 128.0,height: 128.0,),
            ),
            //右下角
            new Align(
              alignment: new FractionalOffset(1.0, 1.0),
              child: Image.asset("images/timg.jpg",width: 128.0,height: 128.0,),
            ),
          ],
        ),
      ),
    );
  }

}

//void main(){
//  runApp(new RowLayoutDemo());
//}

// Row 水平布局
class RowLayoutDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("Row 水平布局"),
          centerTitle: true,
        ),
        body: new Row(
          children: <Widget>[
            new Expanded(
                child: Text(
                    "左侧文本",
                    textAlign: TextAlign.center,
                )
            ),
            new Expanded(
                child: Text(
                  "中间文本",
                  textAlign: TextAlign.center,
                )
            ),
            new Expanded(
                child: new FittedBox(
                  fit: BoxFit.contain,
                  child: const FlutterLogo(),
                )
            ),
          ],
        ),
      ),
    );
  }

}

//void main(){
//  runApp(new ColumnLayoutDemo());
//}


// Column 垂直布局
class ColumnLayoutDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("Column 垂直布局"),
          centerTitle: true,
        ),
        body: new Column(
          children: <Widget>[
            Text("Flutter"),
            Text("垂直布局"),
            new Expanded(
                child: new FittedBox(
                  fit: BoxFit.contain,
                  child: const FlutterLogo(),
                )
            )
          ],
        ),
      ),
    );
  }

}

//void main(){
//  runApp(new ColumnLayoutTwoDemo());
//}

// Column 垂直布局  内容左边对齐
class ColumnLayoutTwoDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("Column 垂直布局"),
          centerTitle: true,
        ),
        body: new Column(
          //水平方向靠左边对齐
          crossAxisAlignment: CrossAxisAlignment.start,
          //主轴方向最小化处理
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text("Flutter是谷歌的移动UI框架'"),
            Text("可以快速在iOS和Android上构建高质量的原生用户界面"),
            Text("Flutter可以与现有的代码一起工作。在全世界"),
            Text("Flutter正在被越来越多的开发者和组织使用"),
            Text("并且Flutter是完全免费、开源的。"),
            //放大字号
            Text("并且Flutter是完全免费、开源的。",style: TextStyle(fontSize: 36.0),),
          ],
        ),
      ),
    );
  }
}

//void main(){
//  runApp(new FittedBoxLayoutDemo());
//}

// FittedBox 布局
class FittedBoxLayoutDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("FittedBox 布局"),
          centerTitle: true,
        ),
        body: new Container(
          color: Colors.grey,
          width: 250.0,
          height: 250.0,
          child: new FittedBox(
            fit: BoxFit.contain,
            child: new Container(
              color: Colors.lightBlue,
              child: Text("缩放布局"),
            ),
          ),
        ),
      ),
    );
  }

}

//void main(){
//  runApp(new StackLayoutDemo());
//}


// Stack 层叠布局 -> 定位之alignment
class StackLayoutDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {

    var stack = new Stack(
      //子组件左上角对齐
      alignment: Alignment.topLeft,
      children: <Widget>[
        //底部添加一个图片
        new CircleAvatar(
          backgroundImage: new AssetImage("images/timg.jpg"),
          radius: 100,
        ),
        //上面加一个容器。容器里面放一个文本
        new Container(
          decoration: new BoxDecoration(
            color: Colors.black38
          ),
          child: Text(
            "追梦小乐",
            style: TextStyle(
              fontSize: 22.0,
              fontWeight: FontWeight.bold,
              color: Colors.white
            ),
          ),
        )
      ],
    );

    // TODO: implement build
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("Stack 层叠布局"),
          centerTitle: true,
        ),
        body: new Center(
          child: stack,
        ),
      ),
    );
  }

}


//void main(){
//  runApp(new StackLayoutPositionedDemo());
//}


// Stack 层叠布局 -> 定位之positioned
class StackLayoutPositionedDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("Stack 层叠布局 -> 定位之positioned"),
          centerTitle: true,
        ),
        body: new Center(
          //添加层叠布局
          child: new Stack(
            children: <Widget>[
              //添加网络图片
              new Image.network("https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1603281524&di=a9a4e262386dad14946fec87437e0bc3&src=http://image.tianjimedia.com/uploadImages/2010/271/H236TA7U2D75_2083557.jpg"),
              //设置定位布局
              new Positioned(
                  bottom: 50.0,
                  left: 50.0,
                  child: Text(
                    "Hi Flutter",
                    style: TextStyle(
                      fontSize: 36.0,
                      fontWeight: FontWeight.bold,
                      fontFamily: "senf",
                      color: Colors.white
                    ),
                  )
              )
            ],
          ),
        ),
      ),
    );
  }

}


//void main(){
//  runApp(new IndexedStackLayoutDemo());
//}


// IndexedStack 层叠布局 -> 根据Index来显示内容
class IndexedStackLayoutDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {

    var indexStack = new IndexedStack(
      index: 0,
      alignment: const FractionalOffset(0.2, 0.2),
      children: <Widget>[
        new CircleAvatar(
          backgroundImage: AssetImage("images/timg.jpg"),
          radius: 100,
        ),
        new Container(
          decoration: new BoxDecoration(
            color: Colors.black38,
          ),
          child: Text(
            "追梦小乐",
            style: TextStyle(
              fontSize: 30.0,
              fontWeight: FontWeight.bold
            ),
          ),
        )
      ],
    );

    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("IndexedStack 层叠布局"),
          centerTitle: true,
        ),
        body: new Center(
          child: indexStack,
        ),
      ),
    );
  }

}

//void main(){
//  runApp(new OverflowBoxLayoutDemo());
//}


// OverflowBox 溢出父布局容器显示
class OverflowBoxLayoutDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("OverflowBox 溢出父布局容器显示"),
          centerTitle: true,
        ),
        body: Container(
          color: Colors.green,
          width: 200.0,
          height: 200.0,
          padding: const EdgeInsets.all(5.0),
          child: OverflowBox(
            alignment: Alignment.topLeft,
            maxWidth: 300.0,
            maxHeight: 500.0,
            child: Container(
              width: 400.0,
              height: 400.0,
              color: Colors.blue,
            ),
          ),
        ),
      ),
    );
  }
}


//2、宽高尺寸处理


//void main(){
//  runApp(new SizeBoxDemo());
//}


// SizeBox （设置具体尺寸）
class SizeBoxDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("SizeBox （设置具体尺寸）"),
          centerTitle: true,
        ),
        body: SizedBox(
          width: 200.0,
          height: 200.0,
          child: const Card(
            child: Text(
              "SizeBox",
              style: TextStyle(
                fontSize: 36.0
              ),
            ),
          ),
        ),
      ),
    );
  }

}


//void main(){
//  runApp(new ConstrainedBoxDemo());
//}


// ConstrainedBox （限定最大最小宽高布局）
class ConstrainedBoxDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("ConstrainedBox （限定最大最小宽高布局）"),
          centerTitle: true,
        ),
        body: new ConstrainedBox(
            constraints: const BoxConstraints(
              maxWidth: 220.0,
              maxHeight: 220.0,
              minWidth: 150.0,
              minHeight: 150.0
            ),
          child: new Container(
            width: 300.0,
            height: 300.0,
            color: Colors.green,
          ),
        ),
      ),
    );
  }

}



//void main(){
//  runApp(new LimitedBoxDemo());
//}


// LimitedBox （限定最大宽高布局）
class LimitedBoxDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("ConstrainedBox （限定最大宽高布局）"),
          centerTitle: true,
        ),
        body: new Row(
          children: <Widget>[
            Container(
              color: Colors.green,
              width: 100,
            ),
            LimitedBox(
              maxWidth: 150,
              child: Container(
                color: Colors.blue,
                width: 300.0,
              ),
            )
          ],
        ),
      ),
    );
  }

}


//void main(){
//  runApp(new AspectRatioDemo());
//}


// AspectRatio （调整宽高比）
class AspectRatioDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("AspectRatio （调整宽高比）"),
          centerTitle: true,
        ),
        body: Container(
          height: 200.0,
          child: new AspectRatio(
              aspectRatio: 1.5,
              child: new Container(
                color: Colors.blue,
              ),
          ),
        ),
      ),
    );
  }

}

//void main(){
//  runApp(new FractionallySizedBoxDemo());
//}


// FractionallySizedBox （百分比布局）
class FractionallySizedBoxDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("FractionallySizedBox （百分比布局）"),
          centerTitle: true,
        ),
        body: Container(
          color: Colors.blueGrey,
          height: 200.0,
          width: 200.0,
          child: FractionallySizedBox(
            alignment: Alignment.topLeft,
            widthFactor: 0.5,
            heightFactor: 1.5,
            child: new Container(
              color: Colors.blue,
            ),
          ),
        ),
      ),
    );
  }

}


//3、列表及表格布局

//void main(){
//  runApp(new ListViewDemo());
//}


// ListView （列表布局）
class ListViewDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    List<Widget> list = <Widget>[
      new ListTile(
        title: Text(
            "一一",
            style: TextStyle(
              fontWeight: FontWeight.w400,
              fontSize: 18.0,
            ),
        ),
        subtitle: Text("11"),
        leading: new Icon(
          Icons.fastfood,
          color: Colors.orange,
        ),
      ),
      new ListTile(
        title: Text(
          "二二",
          style: TextStyle(
            fontWeight: FontWeight.w400,
            fontSize: 18.0,
          ),
        ),
        subtitle: Text("22"),
        leading: new Icon(
          Icons.alarm,
          color: Colors.orange,
        ),
      ),
      new ListTile(
        title: Text(
          "三三",
          style: TextStyle(
            fontWeight: FontWeight.w400,
            fontSize: 18.0,
          ),
        ),
        subtitle: Text("33"),
        leading: new Icon(
          Icons.home,
          color: Colors.orange,
        ),
      ),
      new ListTile(
        title: Text(
          "四四",
          style: TextStyle(
            fontWeight: FontWeight.w400,
            fontSize: 18.0,
          ),
        ),
        subtitle: Text("44"),
        leading: new Icon(
          Icons.person,
          color: Colors.orange,
        ),
      ),
    ];
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("ListView （列表布局）"),
          centerTitle: true,
        ),
        body: new Center(
          child: new ListView(
            children: list,
          )
        ),
      ),
    );
  }

}


//void main(){
//  runApp(new ListViewTwoDemo());
//}


// ListView （实现长文本滚动效果）
class ListViewTwoDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("ListView （实现长文本滚动效果）"),
          centerTitle: true,
        ),
        body: ListView(
          children: <Widget>[
            new Center(
              child: Text(
                "\n广州天河公园",
                style: TextStyle(
                  fontSize: 30.0,
                ),
              ),
            ),
            new Center(
              child: Text(
                "广州天河公园",
                style: TextStyle(
                  fontSize: 20.0,
                ),
              ),
            ),
            new Center(
              child: Text(
                //在长文本的场景，需要使用'''三个引号来表示
                """
                10月20日，山东德州一中学举办运动会，一位老师蹦蹦跳跳为学生加油太激动，口袋里的手机滑落掉进操场边的下水道里。之后... 详细 >10月20日，山东德州一中学举办运动会，一位老师蹦蹦跳跳为学生加油太激动，口袋里的手机滑落掉进操场边的下水道里。之后... 详细 >10月20日，山东德州一中学举办运动会，一位老师蹦蹦跳跳为学生加油太激动，口袋里的手机滑落掉进操场边的下水道里。之后... 详细 >
                """,
                style: TextStyle(
                  fontSize: 18.0,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

}


//void main(){
//  runApp(new GridViewDemo());
//}


// GridView （网格布局）
class GridViewDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // 使用generate构造图片列表
    List<Container> _buildGridTitleList(int count){
      return new List<Container>.generate(
          count,
          (int index) => new Container(
            child: new Image.asset("images/image${index + 1}.jpg"),
          )
      );
    }

    //渲染GridView
    Widget buildGrid(){
      return new GridView.extent(
          //次轴的宽度
          maxCrossAxisExtent: 150.0,
          //上下左右内边距
          padding: const EdgeInsets.all(4.0),
          //主轴间隙
          mainAxisSpacing: 4.0,
          //次轴间隙
          crossAxisSpacing: 4.0,
          //添加9个元素
          children: _buildGridTitleList(9),
      );
    }
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("GridView （网格布局）"),
          centerTitle: true,
        ),
        body: buildGrid(),
      ),
    );
  }

}


//void main(){
//  runApp(new TableDemo());
//}


// Table （表格布局）
class TableDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("Table （表格布局）"),
          centerTitle: true,
        ),
        body: new Center(
          child: Table(
            //设置表格有多少列，并且指定列宽
            columnWidths: const <int,TableColumnWidth>{
              0:FixedColumnWidth(100.0),
              1:FixedColumnWidth(40.0),
              2:FixedColumnWidth(80.0),
              3:FixedColumnWidth(80.0),
            },
            //设置表格边框样式
            border: TableBorder.all(
              color: Colors.black38,
              width: 2.0,
              style: BorderStyle.solid,
            ),
            children: const<TableRow>[
              //添加第一行数据
              TableRow(
                children: <Widget>[
                  Text("姓名"),
                  Text("性别"),
                  Text("年龄"),
                  Text("身高"),
                ]
              ),
              //添加第二行数据
              TableRow(
                  children: <Widget>[
                    Text("张三"),
                    Text("男"),
                    Text("10"),
                    Text("168"),
                  ]
              ),
              //添加第三行数据
              TableRow(
                  children: <Widget>[
                    Text("李四"),
                    Text("女"),
                    Text("20"),
                    Text("190"),
                  ]
              ),
            ],
          ),
        ),
      ),
    );
  }

}


// 4、其它布局处理

//void main(){
//  runApp(new TransformDemo());
//}


// Transform （矩形转换）
class TransformDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("Transform （矩形转换）"),
          centerTitle: true,
        ),
        body: new Center(
          child: Container(
            color: Colors.grey,
            child: Transform(
                alignment: Alignment.topRight,
                transform: Matrix4.rotationZ(0.5),
                child: Container(
                  padding: const EdgeInsets.all(8.0),
                  color: const Color(0xFFE8581C),
                  child: const Text("Transform矩形转换"),

                ),
            ),
          ),
        ),
      ),
    );
  }

}

//void main(){
//  runApp(new BaselineDemo());
//}


// Baseline （基准线布局）
class BaselineDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("Baseline （基准线布局）"),
          centerTitle: true,
        ),
        body: new Row(
          //水平等间距排列子组件
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            //设置基准线
            new Baseline(
                baseline: 80.0,
                //对齐字符底部水平线
                baselineType: TextBaseline.alphabetic,
                child: Text(
                  "AaBbCc",
                  style: TextStyle(
                    fontSize: 18.0,
                    textBaseline: TextBaseline.alphabetic
                  ),
                ),
            ),
            //设置基准线
            new Baseline(
              baseline: 80.0,
              //对齐字符底部水平线
              baselineType: TextBaseline.alphabetic,
              child: Container(
                width: 40.0,
                height: 40.0,
                color: Colors.green,
              ),
            ),
            //设置基准线
            new Baseline(
              baseline: 80.0,
              //对齐字符底部水平线
              baselineType: TextBaseline.alphabetic,
              child: Text(
                "DdEeFf",
                style: TextStyle(
                    fontSize: 26.0,
                    textBaseline: TextBaseline.alphabetic
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

}

//void main(){
//  runApp(new OffstageDemo());
//}


// Offstage （控制是否显示组件）
class OffstageDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    final appTitle = "Offstage （控制是否显示组件）";
    return new MaterialApp(
      title: appTitle,
      home: new OffstageHomePage(title: appTitle,),
    );
  }

}

class OffstageHomePage extends StatefulWidget{

  final String title;

  OffstageHomePage({Key key,this.title}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new OffstageHomePageState();
  }

}

class OffstageHomePageState extends State<OffstageHomePage>{

  //状态控制是否显示文本组件
  bool offstate = true;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        centerTitle: true,
      ),
      body: Center(
        child: Offstage(
          //控制是否显示
          offstage: offstate,
          child: Text(
            "显示",
            style: TextStyle(
              fontSize: 30.0
            ),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
          onPressed: (){
            setState(() {
              offstate = !offstate;
            });
          },
         tooltip: "显示隐藏",
         child: Icon(Icons.home),
      ),
    );
  }

}

//void main(){
//  runApp(new WrapDemo());
//}


// Wrap （按宽高自动换行布局）
class WrapDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text(" Wrap （按宽高自动换行布局）"),
          centerTitle: true,
        ),
        body: Wrap(
          // Chip之间的间隙大小
          spacing: 8.0,
          //行之间的间隙大小
          runSpacing: 4.0,
          children: <Widget>[
            Chip(
                //添加圆形头像
                avatar: CircleAvatar(
                  backgroundColor: Colors.lightGreen.shade200,
                  child: Text(
                    "路飞",
                    style: TextStyle(fontSize: 10.0),
                  ),
                ),
                label: Text("路飞")
            ),
            Chip(
              //添加圆形头像
                avatar: CircleAvatar(
                  backgroundColor: Colors.lightBlue.shade200,
                  child: Text(
                    "娜美",
                    style: TextStyle(fontSize: 10.0),
                  ),
                ),
                label: Text("娜美")
            ),
            Chip(
              //添加圆形头像
                avatar: CircleAvatar(
                  backgroundColor: Colors.lightBlueAccent.shade200,
                  child: Text(
                    "罗宾",
                    style: TextStyle(fontSize: 10.0),
                  ),
                ),
                label: Text("罗宾")
            ),
            Chip(
              //添加圆形头像
                avatar: CircleAvatar(
                  backgroundColor: Colors.limeAccent.shade200,
                  child: Text(
                    "人鱼",
                    style: TextStyle(fontSize: 10.0),
                  ),
                ),
                label: Text("人鱼")
            ),
            Chip(
              //添加圆形头像
                avatar: CircleAvatar(
                  backgroundColor: Colors.lime.shade200,
                  child: Text(
                    "索隆",
                    style: TextStyle(fontSize: 10.0),
                  ),
                ),
                label: Text("索隆索隆")
            ),
          ],
        ),
      ),
    );
  }

}

//5、布局综合实例

void main(){
  runApp(new MyAppDemo());
}



class MyAppDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {

    //风景区地址部分
    Widget addressContainer = Container(
      //四周间隙一定距离
      padding: const EdgeInsets.all(32.0),
      child: Row(
        children: <Widget>[
          Expanded(
              child: Column(
                //顶部对齐
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Container(
                    //与下面文本间隙一定距离
                    padding: EdgeInsets.only(bottom: 8.0),
                    child: Text(
                      "风景区地址",
                      style: TextStyle(
                        fontWeight: FontWeight.bold
                      ),
                    ),
                  ),
                  Text(
                    "湖北省十堰市江口市",
                    style: TextStyle(
                      color: Colors.grey[500]
                    ),
                  )
                ],
              )
          ),
          Icon(
            Icons.star,
            color: Colors.red[500],
          ),
          Text("65")
        ],
      ),
    );

    // 构建按钮组中单个按钮：参数为图标和文本
    Column buildButtonColumn(IconData icon,String label){

      return Column(
        //垂直方向大小最小化
        mainAxisSize: MainAxisSize.min,
        //垂直方向居中对齐
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          //上面图标部分
          Icon(
            icon,
            color: Colors.lightGreen[600],
          ),
          Container(
            margin: EdgeInsets.only(top: 8.0),
            child: Text(
              label,
              style: TextStyle(
                fontSize: 12.0,
                fontWeight: FontWeight.w400,
                color: Colors.lightGreen[600]
              ),
            ),
          )
        ],
      );
    }

    //按钮组成部分
    Widget buttonsContainer = Container(
      //容器横向布局
      child: Row(
        //水平方向均匀排列每个元素
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          buildButtonColumn(Icons.call, "电话"),
          buildButtonColumn(Icons.near_me, "导航"),
          buildButtonColumn(Icons.share, "分享")
        ],
      ),
    );

    //风景区文本介绍
    Widget textContaner = Container(
      padding: const EdgeInsets.all(32.0),
      //文本块一定是用 """""" 来引用起来
      child: Text(
        """
        武当山，中国道教圣地，又名太和山、谢罗山、参上山、仙室山，古有“太岳”“玄岳”“大岳”之称。位于湖北西北部十堰市丹江口市境内。东接闻名古城襄阳市，西靠车城十堰市 ，南望原始森林神农架，北临高峡平湖 丹江口水库。
        明代，武当山被皇帝封为“大岳”、“治世玄岳”，被尊为“皇室家庙”。武当山以“四大名山皆拱揖，五方仙岳共朝宗”的“五岳之冠”地位闻名于世。
        1994年12月，武当山古建筑群入选《世界遗产名录》，2006年被整体列为“全国重点文物保护单位”。2007年，武当山和长城、丽江、周庄等景区一起入选“欧洲人最喜爱的中国十大景区”。2010至2013年，武当山分别被评为国家5A级旅游区、国家森林公园、中国十大避暑名山、海峡两岸交流基地，入选最美“国家地质公园”。 
        截至2013年，武当山有古建筑53处，建筑面积2.7万平方米，建筑遗址9处，占地面积20多万平方米，全山保存各类文物5035件。 
        武当山是道教名山和武当武术的发源地，被称为“亘古无双胜境，天下第一仙山”。武当武术，是中华武术的重要流派。元末明初，道士张三丰集其大成，开创武当派。
        """,
        softWrap: true,
      ),
    );

    return new MaterialApp(
      title: "",
      theme: new ThemeData(
        //应用程序整体主题的亮度
        brightness: Brightness.light,
        //APP主要部分的背景色
        primaryColor: Colors.lightGreen[600],
        //前景色（文本、按钮等）
        accentColor: Colors.orange[600]

      ),
      home: new Scaffold(
        appBar: AppBar(
          title: Text(
              "综合练习",
              style: TextStyle(
                color: Colors.white
              ),
          ),
          centerTitle: true,
        ),
        body: ListView(
          children: <Widget>[
            Image.asset(
              "images/timg.jpg",
              width: 600.0,
              height: 240.0,
              //图片填充整个父布局
              fit: BoxFit.cover,
            ),
            addressContainer,
            buttonsContainer,
            textContaner
          ],
        ),
      ),
    );
  }

}
